<template>
	<view class="container">
		<uni-list>
			<uni-list-item v-for="item,index in list" :key="index" :title="item.name" :thumb="'/static'+item.icon"
				clickable="true" :to='"../fooddetail/fooddetail?id="+item.id'
				thumbSize="lg" :rightText="'￥'+item.price+'元'" :clickable="true" :showArrow="true"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"list": []
			}
		},
		methods: {
			loadfood(){
				uni.request({
					url: 'http://localhost:8090/foodapp/food/list',
					method: 'GET',
					data: {},
					success: res => {
						if (res.data.success) {
							this.list = res.data.list
							uni.showToast({title: '成功',icon: 'none'});
						} else {
							this.list = []
							uni.showToast({	title: '失败',icon: 'none'});
						}
					},
					fail: () => {uni.showToast({title: '失败',icon: 'none'});},
					complete: () => {
						
					}
				});
			}
		},
		
		onShow() {
			console.log("onShow");
		},
		onHide() {
			console.log('onHide');
		},
		onUnload() {
			console.log('onUnload');
		},
		onPullDownRefresh() {
			this.loadfood()
			uni.stopPullDownRefresh();
		},
		onLoad()  {
			this.loadfood()
		}
	}
</script>

<style>
	.container {
		padding: 8rpx;
		font-size: 14px;
		line-height: 24px;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #ccc;
		line-height: 110rpx;
		height: 110rpx;
		margin: 10rpx 8rpx;
	}

	.title {
		flex: 1;
		margin: 0 20rpx;
		font-weight: bold;
	}
</style>
